<template>
    <Navbar/>
    <div class="content">
      <!-- 轮播图 -->
      <el-carousel :interval="5000" arrow="hover" autoplay height="466px" v-if="CarouselData[0]">
          <el-carousel-item v-for="item in CarouselData" :key="item.id">
          <img :src="item.appAdvertiseUrl" width="1200"/>
          </el-carousel-item>
      </el-carousel>
      
      <!-- 首页内容卡 -->
      <div class="Content-card">
          <!-- 内容引导nav -->
          <div class="channelScroll">
               <!-- 左侧滑动导航区 -->
               <div class="channelScrollCon" >
                <!-- <div class="channelScroll-center" >
                  <span v-for="item in channelNavTag" :key="item.navName" class="channelScrollItem">
                      {{item.navName}}
                  </span>
               </div> -->
               <!-- 左侧滑动导航区 -->
               <el-tabs class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane :label="item.navName" :name="item.column" v-for="item in channelNavTag" :key="item.navName" ></el-tab-pane>
                </el-tabs>
               </div>
               <!-- 右侧选择兴趣 -->
               <div class="channelScroll-right">
                <el-button class="chooseInt" :icon="Grid" plain :link="true" @click="getInitIntData">选择兴趣技能</el-button>
               </div>
          </div>

          <!-- 筛选的列表 -->
          <router-view></router-view>
          <!-- 【导航下的标签页 -->
          <!-- <FilterNav /> -->
          <!-- <DanceList /> -->
          <!-- 播放列表模块 -->
          
      </div>

      <!-- dialog弹窗 -->
      <el-dialog style="width: 1024px;" v-model="dialogFormVisible" :show-close="false">
        <!-- 弹窗头部 -->
        <!-- 第一屏内容选择搜索 -->
        <div class="dialogHeader" v-if="isSearchShow">
            <span class="title">选择我的兴趣技能&nbsp;&nbsp;</span>
            <span>{{IntSkillsData.length}}&nbsp;/&nbsp;7</span>
            <p style="margin-top: 10px;">例如舞蹈就选舞种</p>
        </div>
        <!-- 第二屏搜索跳转 -->
        <div class="dialogHeader-return" v-else>
            <p @click="dialogReturn">↶ 返回</p>
        </div>

        <!-- 弹窗选择区域卡片 -->
        <div class="interestCard">
            <!-- input搜索 -->
            <div class="interest-search">
            <el-input
                style="width: 300px;height:40px;margin-top: 10px;"
                placeholder="搜索兴趣技能"
                :prefix-icon="Search"
                v-model="SearchValue"
            />
            <el-button
                style="width: 60px ;height:40px;margin-top: 10px; margin-left: 10px;"
                text
                bg
                @click="getSearchIntData"
                >搜索
            </el-button>
            </div>
            <!-- 展示选择的舞蹈种类 -->
            <div class="interestTypeList">
                <div class="int-tagItem" v-for="IntSkill in IntSkillsData" :key="IntSkill.id" @click="chooseIntSkillTag(IntSkill.id)" v-if="isSearchShow">
                    <span>{{IntSkill.name}}</span>
                    <span class="int-icon">X</span>
                </div>
                <div v-else>
                    <p style="margin-bottom: 5px;">历史搜索</p>
                    <div class="int-tagItem">韩国女团</div>
                </div>
            </div>
            <p style="margin-top: 10px; margin: 10px 0;" v-if="isSearchShow">推荐的兴趣技能</p>
            <p style="margin-top: 10px; margin: 10px 0;" v-else>搜索结果</p>
            <!-- 请求列表 -->
            <div class="interestList"  v-if="isSearchShow" @scroll.passive="getScroll($event)">
                <div class="ALLInterestList" >
                    <div class="tag-item" :title="Recom.name" v-for="Recom in RecommendIntData" :key="Recom.id" @click="chooseTag(Recom.id,Recom)" >
                        <span>{{Recom.name}}</span>
                        <span class="int-icon" v-if="chooseArr.includes(Recom.id)" @click="chooseTag(Recom.id,Recom)">✓</span>
                    </div>
                </div>
            </div>
            <div class="Search-interestList" v-else>
                <div class="ALLSearchList">
                    <div class="ALLSearchList-item" v-for="item in SearchIntData" :key="item.id">
                        <div class="icon">♥</div>
                        <div class="info">
                            <span>{{item.name}}</span>
                            <span>{{item.description}}</span>
                        </div>
                        <div class="add">＋</div>
                    </div>
                </div>
            </div>

            <!-- 选择舞种底部 -->
            <div class="interestList-bottom" v-if="isSearchShow">
                <span class="Int-confirm" @click="SaveChooseIntDaTa">确认</span>
                <span class="Int-cancel"  @click="dialogFormVisible=false">取消</span>
            </div>
        </div>
      </el-dialog>
    </div>
    <Button />
  </template>
  
  <script lang="ts">
  import {defineComponent} from 'vue';
import { storeToRefs } from 'pinia'

  
  export default defineComponent({
    name: 'Home',
  });
  </script>
  
  
  <script setup lang="ts">
  //引入请求
  import {RequestCarouselData,RequestIntSkills,RequestRecommendInt,RequestSavaChooseInt,RequestSearchInt} from '@/api/Resource'
  import type {CarouselDataType,RecommendItemType,avocationType,SearchIntReturnType,RecommendContentType} from '@/api/Resource'
  import {onMounted,ref} from 'vue'
  import {Grid,Search,Pointer,ChatDotRound,Star} from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import type { TabsPaneContext } from 'element-plus'
  import router from '@/router'

  const activeName = ref('first')
  
  let CarouselData = ref<CarouselDataType>([]) //轮播图数据

  let dialogFormVisible = ref(false) //弹窗

  let IntSkillsData = ref<avocationType>([])//默认已选择的兴趣列表

  let RecommendIntData = ref<RecommendContentType>([])//所有可选的兴趣列表数据
  let pageNum = ref(1)
  let pageSize = ref(20)

  let chooseArr =ref<string[]>([])//保存已经获取默认已选择的兴趣列表

  let isSearchShow = ref<boolean>(true) //显示弹窗两个页面的布尔值

  let SearchValue = ref('') //查询输入的参数

  let SearchIntData = ref<SearchIntReturnType>([]) //查询搜索的数据



  //01-定义导航nav的数据
  interface channelNavTagItemType{
      column:string,
      navName:string
  }
  type channelNavTagType = channelNavTagItemType[]
  
  let channelNavTag = ref<channelNavTagType>([  
      { 
          column:'recommend',
          navName:'推荐',
      },
      {
          column:'original',
          navName:'作品',
      },
      {
          column:'course',
          navName:'教程',
      },
      {
          column:'specialTopic',
          navName:'专题',
      },
      {
          column:'frontDynamic',
          navName:'动态',  
      },
      {
          column:'attention',
          navName:'关注',
      },
  ])
  
  //02-获取数据
  onMounted(() => {
      //进入页面请求轮播页面
      getCarouselData()
  })
  
  //03-进入首页获取轮播图页面的请求
  const getCarouselData = async()=>{
      const re = await RequestCarouselData()
    //   console.log(re);
      CarouselData.value = re
  }

  //04-点击弹窗时，发送请求获取初始展示数据
  const getInitIntData=async()=>{
    
    //清除原始数据，否则进来就叠加原始数据
    RecommendIntData.value = []
    //恢复增加的pageNum值为1
    pageNum.value = 1
    // 搜索值清空
    SearchValue.value = ''
    //点开弹窗
    dialogFormVisible.value = true
    //发送用户已经选好的兴趣请求 7个
    const re = await RequestIntSkills()
    // console.log(re.avocation,'int');
    IntSkillsData.value = re.avocation

    //发送初始请求的数据 前20
    const re1 = await RequestRecommendInt(pageNum.value-1,pageSize.value)
    // console.log(re1,'re1');
    RecommendIntData.value.push(...re1.content)
    // console.log(RecommendIntData.value,'11');
    const re2 = await RequestRecommendInt(pageNum.value,pageSize.value)
    RecommendIntData.value.push(...re2.content)
    // console.log(RecommendIntData.value,'22');
    AddARR()
  }

  //05-滚动条触底更新
  const getScroll: any= async(e:any)=>{
    //判断是否触底
    // console.log(e.srcElement.scrollTop); 滚动条距离顶部高度
    console.log(e.srcElement.clientHeight);//滚动条高度
    // console.log(e.srcElement.scrollHeight); //滑槽高度
    console.log(Math.floor(e.srcElement.scrollTop + e.srcElement.clientHeight)== e.srcElement.scrollHeight);
    
    //出现偏差
    if (Math.floor(e.srcElement.scrollTop + e.srcElement.clientHeight)== e.srcElement.scrollHeight || Math.ceil(e.srcElement.scrollTop + e.srcElement.clientHeight)== e.srcElement.scrollHeight) {
        
        //每次触底pageNum+1
        pageNum.value = pageNum.value+1
        //发送请求
        const Scrollre = await RequestRecommendInt(pageNum.value,pageSize.value)
        //添加到原始数据中
        RecommendIntData.value.push(...Scrollre.content)
    }
  }
  
  //06-进入弹窗时收集已选择的舞种的id用来对比
  const AddARR=()=>{
    chooseArr.value=[]
    //映射id
    IntSkillsData.value.map(item=>chooseArr.value.push(item.id))
  }


  //07-点击推荐舞蹈的tag时添加或取消  =>有就删除  没有就添加      
  const chooseTag=(id:string,Recom:RecommendItemType)=>{
    //当两个数据length小于7个时执行
    if(IntSkillsData.value.length<=6 && chooseArr.value.length<=6){
        //判断如果id存在在我们存的数据中时
        if(chooseArr.value.includes(id)){
        //点击就会删除对应的数据，
        IntSkillsData.value = IntSkillsData.value.filter(item=>item.id!== id)
        chooseArr.value = chooseArr.value.filter(item=>item !== id)
        }else{
            //如果没有就会添加该数据
            chooseArr.value.push(id)
            IntSkillsData.value.push(Recom)
        }
    }else{
        ElMessage.warning('不能添加超过7个')
    }
  }

    //09-点击默认选择的兴趣时，取消当前兴趣
  const chooseIntSkillTag=(id:string)=>{
    IntSkillsData.value = IntSkillsData.value.filter(item=>item.id!== id)
    chooseArr.value = chooseArr.value.filter(item=>item !== id)
  }


    //10-收集选择的数据，发送请求
    const SaveChooseIntDaTa=async()=>{
        try{
            await RequestSavaChooseInt(IntSkillsData.value)
        }catch(e){
            ElMessage.success('更新成功')
        }
            dialogFormVisible.value=false
    }

    //11-点击搜索发请求 RequestSearchInt
   const getSearchIntData = async() =>{
    //搜索后跳转搜索页
    isSearchShow.value = false
    //发请求获取搜索数据
     const re = await RequestSearchInt(SearchValue.value)
      console.log(re);
      SearchIntData.value = re
   }

    //12-点击返回时操作
   const dialogReturn=()=>{
    isSearchShow.value= true
    SearchValue.value = ''
   }

    //13- 点击路由跳转
  const handleClick = (tab: TabsPaneContext,event:Event) => {
    // console.log(tab.paneName, event)
    router.push({
        path:`/home/${tab.paneName}`,
        query:{
            column:tab.paneName
        }
    })
}
    
    
  </script>
  
  <style lang="scss" scoped>
    //弹窗的样式    
    :deep(.el-dialog__header){
        padding: 0;
        padding-bottom: 0; 
        margin-right: 0;
    }

    :deep(.el-dialog__body){
        padding:0
    }

    //nav的样式
    :deep(.el-tabs){
        --el-tabs-header-height:78px;
    }
    :deep(.el-tabs__nav-scroll){
        display: flex;
    }
    :deep(.el-tabs__nav){
        margin: 0 auto;
    }
    :deep(.el-tabs__item){
        padding: 20px 4px;
        margin: 0 20px;
        line-height: 45px;
    }
    :deep(.el-tabs__nav-prev){
        display: none;
    }
    :deep(.el-tabs__nav-next){
        display: none;
    }
    :deep(.el-tabs__nav-wrap::after){
        position: relative;
    }
  .content{
      width: 1200px;
      margin: 20px auto;
      .Content-card{
        width: 100%;
        // 内容引导nav 
        .channelScroll{
          width: 100%;
          height: 80px;
          position: relative;
          .channelScrollCon{
              width: 950px;
              margin: 0 auto;
            .channelScroll-center{
              text-align: center;
              display: inline-block;
              margin-left:100px;
              width: 950px;
              height: 80px;
              line-height: 80px;
              font-size: 16px;
              overflow: hidden;
              .channelScrollItem{
                  padding: 20px 4px;
                  margin: 0 20px;
                  cursor:pointer
              }
            }
          }
          .channelScroll-right{
              width: 120px;
              height: 80px;
              line-height: 80px;
              text-align: center;
              position: absolute;
              top: 0;
              right: 0;
              .chooseInt{
                border: none;
                width: 120px;
                height: 80px;
                font-size:16px ;
                background-color: #f5f7f9;
                
              }
          }
      }
       
        //播放列表模块样式
    }

      //弹窗
      :deep(.el-dialog){
        width: 50%;
        padding: 20px;
        //弹窗头部
       .dialogHeader{
        padding: 0;
        .title{
            font-size: 18px;
        }
      }
        //头部第二栏返回
        .dialogHeader-return{
            width: 100%;
            height: 30px;
            padding-bottom: 15px;
            font-size: 20px;
        }
        //弹窗内容部分
       .interestCard{
        
            //弹窗的兴趣选择部分
            .interestTypeList{
                width: 985px; 
                margin-top: 30px;
                height: 61px;
                display: flex;
                .int-tagItem{
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: bold;
                    margin: 0 22px 22px 0;
                    border: 1px solid rgb(226, 226, 226);
                    position: relative;
                    .int-icon{
                        position: absolute;
                        right: -10px;
                        top: -10px;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        color: #f5f7f9;
                        border-radius: 50%;
                        background: #b1b5c1;
                        cursor:pointer;
                    }
                }
            }
            // 所有兴趣舞蹈列表
            .interestList{
                width: 1000px; 
                height: 300px;
                overflow: hidden;
                &:hover{
                    overflow: auto;
                }
                &::-webkit-scrollbar {
                    border-radius: 3px;
                    width: 6px;
                  }
                &::-webkit-scrollbar-thumb{
                    border-radius: 3px;
                    background-color: rgb(158, 160, 160);
                }
                &::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                    background-color: #fcfcfc;
                }

                .ALLInterestList{
                    // 所有的舞蹈列表
                    width: 100%;
                    padding-top: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    
                    .tag-item{
                        box-sizing: border-box;
                        width: 100px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 12px;
                        font-weight: bold;
                        margin: 0 22px 22px 0;
                        border: 1px solid rgb(226, 226, 226);
                        position: relative;
                        .int-icon{
                            position: absolute;
                            right: -10px;
                            top: -10px;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            color: #f5f7f9;
                            border-radius: 50%;
                            background: #f93684;
                            cursor:pointer;
                        }
                    }
                }
            }
            // 查询的列表
            .Search-interestList{
                width: 1000px; 
                height: 300px;
                overflow: hidden;
                &:hover{
                    overflow: auto;
                }
                &::-webkit-scrollbar {
                    border-radius: 3px;
                    width: 6px;
                  }
                &::-webkit-scrollbar-thumb{
                    border-radius: 3px;
                    background-color: rgb(158, 160, 160);
                }
                &::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                    background-color: #fcfcfc;
                }
                .ALLSearchList{
                    // 所有查询的列表
                    width: 100%;
                    padding-top: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    //查询的每一项
                    .ALLSearchList-item{
                        width: 300px;
                        height: 68px;
                        line-height: 68px;
                        border: 1px solid #b1b5c1;
                        margin-right: 20px;
                        margin-bottom: 20px;
                        display: flex;
                        flex-wrap: wrap;

                        .icon{
                            width: 44px;
                            height: 44px;
                            font-size: 44px;
                            margin-left: 10px;
                        }
                        .info{
                            width: 196px;
                            height: 68px;
                            margin-left: 5px;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            span{
                                display:inline-block;
                                width: 196px;
                                height: 22px;
                                line-height: 22px;
                            }
                        }
                        .add{
                            width: 44px;
                            height: 44px;
                            font-size: 44px;
                        }
                    }
                }
            }
            //底部确认返回
            .interestList-bottom{
                width: 984px;
                height: 40px;
                padding: 20px 0px;
                .Int-cancel{
                    width: 130px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 18px;
                    border: 1px solid rgb(226, 226, 226);
                    border-radius: 8px;
                    float: right;
                    cursor:pointer;
                }
                .Int-confirm{
                    width: 130px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 18px;
                    color: #fff;
                    border: 1px solid rgb(226, 226, 226);
                    background-color: rgb(114, 207, 223);
                    border-radius: 8px;
                    margin-left: 10px;
                    float: right;
                    cursor:pointer;
                }
            }
        }
    }
  }
  </style>
  